<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.com">
<head>
    <meta charset="UTF-8">
    <title>Statistic Page</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!--    <link rel="stylesheet" th:href="@{/css/bulma.css}">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<!--    <script type="text/javascript" th:src="@{/js/echarts.min.js"></script>-->
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
    <h2 class="title" style="text-align: center; color: #7bed9f; margin: 50px">结算统计报表展示：</h2>
    <div class="buttons">
        <button class="button is-info">结算类型</button>
        <button class="button is-success">金额</button>
        <button class="button is-warning">日期</button>
        <button class="button is-danger">记录人</button>
    </div>
<!--    <input type="hidden" th:value="${income}" id="income">-->
<!--    <input type="hidden" th:value="${outcome}" id="outcome">-->
    <div id="main" style="width: 1000px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化ECharts组件到id为main的元素上
    let myChart = echarts.init(document.getElementById('main'), 'dark');

    // var income = $("#income").val();
    // var outcome = $("#outcome").val();

    var income = "[[${income}]]";
    var outcome = "[[${outcome}]]";
    // 定义图标的配置项
    let option = {
        title: {
            text: '结算记录报表展示'
        },
        tooltip: {},
        legend: {
            data: ["金额"]
        },
        // x轴配置
        xAxis: {
            data: ['开票', '报销']
        },
        // y轴配置
        yAxis: {},
        series: [{
            name: '金额',
            // 数据集（也可以从后端的Controller中传入）
            data: [income, outcome],
            // 图表类型，这里使用line，为折线图
            type: 'bar'
        }]
    };
    myChart.setOption(option);
</script>
</html>